<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Basic Accordion - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="https://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="https://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/icon.css">
		<script type="text/javascript" src="https://www.jeasyui.net/Application/Home/View/Public/js/jquery.js"></script>
		<script type="text/javascript" src="https://www.jeasyui.net/Application/Home/View/Public/js/easyui/jquery.easyui.min.js"></script>
	</head>

	<body>
		<div id="cc" class="easyui-layout" style="width:100%;">
			<div data-options="region:'north',title:'导航栏',split:true" style="height:100px;"></div>
			<div data-options="region:'south',title:'页脚',split:true" style="height:100px;"></div>
			<div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
			<div data-options="region:'west',title:'操作栏',split:true" style="width:150px;">
				<div id="sm" class="easyui-sidemenu" data-options="data:data,width:'140',border:false,onSelect:select"></div>
			</div>
			<div data-options="region:'center',title:'操作栏'" style="padding:5px;background:#eee;">
				<!--模块框-->
				<div id="dd" class="easyui-dialog" title="模块框" style="width:400px;height:200px;" data-options="
					closed:true,iconCls:'icon-save',resizable:true,modal:true">

					<!--FROM表单-->
					<form id="ff" method="post">
						<div>
							<label for="name">Name:</label>
							<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
						</div>
						<div>
							<label for="email">Email:</label>
							<input class="easyui-validatebox" type="text" name="text" />
						</div>
					</form>

				</div>

				<table class="easyui-datagrid" style="width:100%;height:100%" data-options="url:'http://ab.boatim.top/msg',method:'GET', fitColumns:true,singleSelect:true,
					onClickRow:onRow">
					<thead>
						<tr>
							<th data-options="field:'name',width:100">Code</th>
							<th data-options="field:'text',width:100">Name</th>
							<th data-options="field:'createdAt',width:100,align:'right'">Price</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		console.log(window.innerHeight)
		$('#cc').css('height', window.innerHeight - 20)

		
		var data = [{
			text: '栏目1',
			iconCls: 'icon-sum',

			children: [{
				text: 'Option1',
				ids: '11211'
			}, {
				text: 'Option2'
			}, {
				text: 'Option3',
				children: [{
					text: 'Option31'
				}, {
					text: 'Option32'
				}]
			}]
		}, {
			text: '选项2',
			state: 'open',
			iconCls: 'icon-more',
			children: [{
				text: 'Option4'
			}, {
				text: 'Option5'
			}, {
				text: 'Option6'
			}]
		}];

		function select(i) {
			console.log(i)
		}

		function optionsMsg() {
			console.log(i)
		}
	
//		选中行 
		function onRow(i, data) {
			$('#dd').dialog('open')
			console.log(i, data)
			$('#ff').form('load', {
				name: data.name,
				text:data.text
			});

		}
	</script>

</html>